<template>
  <div class="personal-main">
    <div class="personal-pay">
      <h3><i>我的个人中心</i></h3>

      <div class="user-borrower" v-if="isStatus===1">
        <el-form label-width="100px" style="margin-right: 300px">
          <el-descriptions style="margin-left: 180px;margin-top: 50px" direction="vertical" :column="2" border>
            <el-descriptions-item label="姓名">{{user.userName}}</el-descriptions-item>
            <el-descriptions-item label="性别">{{user.sex}}</el-descriptions-item>
            <el-descriptions-item label="年龄">{{user.age}}</el-descriptions-item>
            <el-descriptions-item label="邮箱">{{user.email}}</el-descriptions-item>
            <el-descriptions-item label="手机号">{{user.phone}}</el-descriptions-item>
            <el-descriptions-item label="身份证号">{{user.IDcard}}</el-descriptions-item>
          </el-descriptions>
        </el-form>
        <el-form label-width="120px">
          <el-form-item>
            <el-button
                style="margin-left: 150px;margin-top: 50px"
                type="primary"
                @click="updateUser"
            >
              修改信息
            </el-button>
          </el-form-item>
        </el-form>
      </div>

      <div class="user-borrower" v-if="isStatus===0">
        <div class="demo-input-suffix" style="margin-left: 200px;line-height: 50px">
          姓&nbsp;&nbsp;&nbsp;&nbsp;名：&nbsp;&nbsp;<el-input style="width: 300px;margin-top: 30px" placeholder="请输入姓名" v-model="user2.name"></el-input><br/>
          性别：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <el-select v-model="user2.sex">
              <el-option value="男" label="男">男</el-option>
              <el-option value="女" label="女">女</el-option>
            </el-select><br/>
          年&nbsp;&nbsp;&nbsp;&nbsp;龄：&nbsp;&nbsp;<el-input style="width: 300px;margin-top: 5px" placeholder="请输入年龄" v-model="user2.age"></el-input><br/>
          邮&nbsp;&nbsp;&nbsp;&nbsp;箱：&nbsp;&nbsp;<el-input style="width: 300px;margin-top: 5px" placeholder="请输入邮箱" v-model="user2.email"></el-input><br/>
          手机号：&nbsp;&nbsp;&nbsp;<el-input style="width: 300px;margin-top: 5px" placeholder="请输入手机号" v-model="user2.phone"></el-input><br/>
          身份证号：<el-input style="width: 300px;margin-top: 5px" placeholder="请输入身份证号" v-model="user2.IDcard"></el-input><br/>
        </div>
        <el-form label-width="120px;">
          <el-form-item>
            <el-button
                style="margin-left: 150px;"
                type="primary"
                @click="updateUserFirm"
            >
              确定修改
            </el-button>
            <el-button
                style="margin-left: 80px"
                type="primary"
                @click="returnBack"
            >
              返回
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="user-borrower" v-if="isStatus===2">
        <el-row>
          <el-col :sm="12" :lg="6" style="margin-left: 300px">
            <el-result icon="success" title="修改成功">
              <template slot="extra">
                <el-button type="primary" @click="returnBack" size="medium">返回</el-button>
              </template>
            </el-result>
          </el-col>

        </el-row>
      </div>

    </div>
  </div>
</template>

<script>
export default {
  name: "repayment",
  data() {
    return {
      user:{
        userName:'',
        sex:'',
        age:'',
        IDcard:'',
        email:'',
        phone:'',
      },
      user2:{
        name:'',
        sex:'',
        age:'',
        IDcard:'',
        email:'',
        phone:'',
      },
      isStatus:1,
      users:[],
    }
  },
  created() {
    this.$axios
        .get(`http://localhost:9090/loan/user/getUserByUid`).then(
        response => {
          this.users=response.data
          this.user.userName=this.users.userName
          this.user.sex=this.users.sex
          this.user.age=this.users.age
          this.user.IDcard=this.users.idCard
          this.user.email=this.users.email
          this.user.phone=this.users.phone
        }
    )
  },
  methods:{
    updateUser(){
      this.isStatus=0
      this.user2.name=this.user.userName
      this.user2.sex=this.user.sex
      this.user2.age=this.user.age
      this.user2.IDcard=this.user.IDcard
      this.user2.email=this.user.email
      this.user2.phone=this.user.phone

    },
    updateUserFirm(){
      if (!(this.user2.name)){
        this.$message({
          type: 'info',
          message: "请输入姓名"
        })
      }else  if (!(this.user2.sex)){
        this.$message({
          type: 'info',
          message: "请输入性别"
        })
      }else  if (!(this.user2.age)){
        this.$message({
          type: 'info',
          message: "请输入年龄"
        })
      }else  if (!(this.user2.email)){
        this.$message({
          type: 'info',
          message: "请输入邮箱"
        })
      }else  if (!(this.user2.phone)){
        this.$message({
          type: 'info',
          message: "请输入手机号码"
        })
      }else  if (!(this.user2.IDcard)){
        this.$message({
          type: 'info',
          message: "请输入身份证号码"
        })
      }else if (
          (this.user2.Name)||
          (this.user2.sex)||
          (this.user2.age)||
          (this.user2.email)||
          (this.user2.phone)||
          (this.user2.IDcard)
      ){
        this.user.userName=this.user2.name
        this.user.sex=this.user2.sex
        this.user.age=this.user2.age
        this.user.IDcard=this.user2.IDcard
        this.user.email=this.user2.email
        this.user.phone=this.user2.phone
        this.$axios
            .post(`http://localhost:9090/loan/user/updateuserByUid?userName=`+this.user2.name
                +'&sex='+this.user2.sex
                +'&age='+this.user2.age
                +'&IdCard='+this.user2.IDcard
                +'&email='+this.user2.email
                +'&phone='+this.user2.phone
            ).then(
            response => {
              if (response.data.success==true){
                this.isStatus=2
                this.$message({
                  type: 'success',
                  message: "修改成功"
                })
              }else {
                this.$message({
                  type: 'info',
                  message: "修改失败"
                })
              }

            }
        )
      }



    },
    returnBack(){
      this.isStatus=1
      this.user2.name=''
      this.user2.sex=''
      this.user2.age=''
      this.user2.IDcard=''
      this.user2.email=''
      this.user2.phone=''
    },
  }


}
</script>

<style scoped>

</style>
